<template>
	<!-- 登录切换方式组件 -->
	<div class="title_tab">
		<ul class="my_ul" ref="myUl">
			<li :class="{'li_choosed':index == currentIndex}" 
			v-for="(val,index) in menuConfig" :key="index" 
			@click="changeMenu(index,$event)">{{val}}</li>
		</ul>
		<span class="underline" :style="underlineStyle"></span>
	</div>
</template>

<script>
	export default{
		props:['menuConfig'],
		data() {
			return{
				currentIndex:0,
				underlineStyle:{
					left:'0px'
				}
			}
		},
		methods:{
			changeMenu(index,e){
				this.currentIndex = index;
				this.underlineStyle.left = `${this.currentIndex * 165}px`;
				// 如果是根据字多少决定的长度,上面要写字
				// const liList = this.$refs.myUl.children;
				// let width = 0;
				// for (let li of liList){
				// 	if(li === e.target){
				// 		break;
				// 	}
				// 	width += li.offsetWidth;
				// }
				// this.underlineStyle.left = `${width}px`;
				this.$emit('menu-changed',index)
			}
		},
		mounted() {
			// console.log(this.menuConfig);
		}
	}
</script>

<style>
	/* 登录切换方式 */
	.title_tab {
		width: 100%;
		position: relative;
		height: 60px;
		line-height: 60px;
		font-size: 16px;
	}
	.title_tab li {
		width: 165px;
		
		text-align: center;
		
		float: left;
		border-bottom: 1px solid #e5e5e5;
		/* overflow: visible; */
		cursor: pointer;
	}	
	/* 选中的字体颜色 */
	.li_choosed {
		color: #3f9f5f;
	}
	.underline {
		width: 165px;
		border-bottom: 2px solid #28b76c;
		bottom: 0px;
		cursor: pointer;
		position: absolute;
		left: 0px;
		transition: width, left .4s linear;
	}
</style>